<template>
	<view class="container">
		<!-- 内容区域 -->
		<scroll-view class="order-list" scroll-y>
			<view v-for="order in filteredOrders" :key="order.use" class="order-item">
				<view class="order-content">
					<view class="order-details">
						<text class="order-title">{{ order.productName }}</text>
						<text class="order-info">成人 ¥{{ order.adultPrice }} x{{ order.adultCount }}，老人/学生 ¥{{ order.seniorStudentPrice }} x{{ order.seniorStudentCount }}</text>
						<text class="order-info">提交人：{{ order.userName }}</text>
						<text class="order-info">创建时间：{{ order.setoffTime }}</text>
						<view class="divider"></view>
						<view class="order-status">
							<text :class="statusText(order.state)" class="status-text">{{order.state}}</text>
							<text class="order-action" @click="navigateTo(order.state)">{{ actionText(order.state) }}</text>
						</view>
					</view>
					<image class="order-image" :src="order.imgUrl" mode="aspectFill" />
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import getOrdersById from '../../../api/http.js'
export default {
	data() {
		return {
			tab: '',
			orders: [
			]
		};
	},
	onLoad(option){
		this.tab=option.tab;
		console.log(this.tab)
		//根据参数设置页面标题
		let title = '全部订单';
		uni.setNavigationBarTitle({
			title: this.tab
		});
	},
	computed: {
		filteredOrders() {
			if(this.tab==='全部订单'){
				return this.orders
			}else{
				return this.orders.filter(order => order.state===this.tab);
			}
			
		}
	},
	created() {
		let identity = uni.getStorageSync('state') === 0 ? 'agent' : 'tourist'
		let id = uni.getStorageSync("id")
		//根据角色调用不同方法
		getOrdersById(identity, id).then(res=>{
				this.orders = res.data
				console.log('id='+id)
				console.log(this.orders)
		}) 
		
	},
	methods: {
		setActiveTab(tab) {
			this.activeTab = tab;
		},
		statusText(status) {
			switch (status) {
				case '待确认':
					return 'confirmed';
				case '待签署':
					return 'signed';
				case '待支付':
					return 'paid';
				case '待出行':
					return 'ready';
				case '已完成':
					return 'completed';
				default:
					return '';
			}
		},
		actionText(status) {
			switch (status) {
				case '待确认':
					return '修改合同';
				case '待签署':
					return '签署合同';
				case '待支付':
					return '查看合同';
				case '待出行':
					return '查看合同';
				case '已完成':
					return '查看合同';
				default:
					return '';
			}
		},
		navigateTo(page) {
		  switch (page) {
			//修改合同
			case 'confirmed':
			  uni.navigateTo({
				url: '/pages/salesman/contract/editContract'
			  });
			  break;
			//查看合同
			case 'paid','ready','completed':
			  uni.navigateTo({
				// url: '/pages/pendingPayment/pendingPayment'
			  });
			  break;
			//签署合同
			case 'signed':
			  uni.navigateTo({
				url: '/pages/user/contract/finishContract'
			  });
			  break;
			default:
			  console.warn('Unknown page:', page);
		  }
		}
	}
};
</script>

<style scoped>
	.container {
		background-color: #f8f8f8;
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}
	.order-list {
		flex: 1;
		width: 95%;
		padding: 10px;
	}
	.order-item {
		background-color: #fff;
		border-radius: 10px;
		margin-bottom: 10px;
		padding: 10px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.order-content {
		display: flex;
		justify-content: space-between;
	}

	.order-image {
		width: 120px;
		height: 80px;
		right: 12px;
		border-radius: 8px;
	}

	.order-details {
		flex: 1;
		display: flex;
		flex-direction: column;
		margin-right: 10px;
	}

	.order-title {
		font-size: 14px;
		color: #333;
		margin-bottom: 5px;
	}

	.order-info {
		font-size: 12px;
		color: #666;
		margin-bottom: 5px;
	}

	.divider {
		height: 1px;
		background-color: #e0e0e0;
		margin: 5px 0;
	}

	.order-status {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 14px;
		margin-top: 5px;
	}
	.confirmed {
		color: #1989fa;
	}

	.signed {
		color: #07c160;
	}
	.paid {
		color: #ee0a24;
	}

	.ready {
		color:orange;
	}

	.completed {
		color: gray;
	}
/* 	.status-text {
		color: #007bff;
	} */

	.order-action {
		margin-right: -110px;
		font-size: 14px;
		color: #007bff;
	}

	.footer-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #888;
	}

	.footer-item.active {
		color: #1989fa;
	}

	.footer-icon {
		width: 24px;
		height: 24px;
		margin-bottom: 2px;
	}

	.footer-icon.active {
		filter: invert(45%) sepia(80%) saturate(1000%) hue-rotate(190deg) brightness(100%) contrast(95%);
	}
</style>